<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
</head>
<body>
<div id="root">

</div>

</body>
<script type="text/babel">
    // 组件：页面是由组件来构成的。组件其实是对HTML的一种扩展。
    // 组件分为二种类型：
    //    1- 通用组件
    //    2- 功能组件

    const root = ReactDOM.createRoot(document.querySelector("#root"));
    // 函数组件：通过函数创建的组件可以称为函数组件
    // 特点1：函数的名字即是组件名,可以将组件名作为标签来用。
    // 特点2：函数的名字首字母必须大写
    // 特点3：必须要有返回值(建议)，如果不需要有返回值，建议返回null,false
    // 特点4：返回的内容即是该组件呈现的内容。
    // 特点5：如果返回的内容是true,false,null,undefined不会进行任何的渲染。
    // 特点6：函数组件可以被使用多次
    // jsx:在解析的时候如果遇到{}，会将{}内包裹的数据作为表达式来处理，表达式的值即是{}所呈现的内容。
    //     如果遇到标签首字母大写的，那么会被作为组件来处理。
    function Boy(){
        // return 1;
        // return "2";
        // return {a:1,b:2,c:3}; // 不支持
        // return [1,2,3,4];
        // return true;
        // return false;
        // return undefined;
        // return null;

        // 如果返回的JSX比较简单
        // return <div/>

        // 如果返回的JSX比较复杂
        return (
            <div>
                <h3>男生小说</h3>
                <p>一念永恒--耳根</p>
                <p>大奉打更人--卖报小朗君</p>
            </div>
        )
    }

    root.render((
        <div>
            <Boy></Boy>
            <hr/>
            <Boy/>

            <hr/>
            <div>
            <h3>女生小说</h3>
                <p>霸道总裁爱上我--耳根</p>
                <p>还珠格格--卖报小朗君</p>
            </div>
        </div>
    ));

</script>
</html>